<script setup lang="ts">
import type { GuessItemVO } from "@/types/homeType";

interface GuessCardProps {
   list: GuessItemVO[];
   loadingText?: string;
   title: string;
}

defineProps<GuessCardProps>();

</script>

<template>
   <view class="guess-card">
      <view class="caption">
         <text class="text">{{ title }}</text>
      </view>
      <view class="guess">
         <Good v-for="item in list" :key="item.id" :good="item" />
      </view>
      <view class="loading-text" v-if="loadingText">{{ loadingText }}</view>
   </view>
</template>

<style scoped lang="scss">
.guess-card {
   background-color: #f7f7f8;

   .caption {
      display: flex;
      justify-content: center;
      line-height: 1;
      padding: 36rpx 0 40rpx;
      font-size: 32rpx;
      color: #262626;

      .text {
         display: flex;
         justify-content: center;
         align-items: center;
         padding: 0 28rpx 0 30rpx;

         &::before,
         &::after {
            content: '';
            width: 20rpx;
            height: 20rpx;
            background-image: url(@/static/images/bubble.png);
            background-size: contain;
            margin: 0 10rpx;
         }
      }
   }

   .guess {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 20rpx;
   }

   .loading-text {
      text-align: center;
      font-size: 28rpx;
      color: #666;
      padding: 20rpx 0;
   }
}

</style>